<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="150px"
    >
      <el-form-item label="合同编号" prop="contractNumber">
        <el-input
          v-model="dataForm.contractNumber"
          placeholder="合同编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="合同名称" prop="contractName">
        <el-input
          v-model="dataForm.contractName"
          placeholder="合同名称"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="合同开始日期" prop="startTime">
        <el-input
          v-model="dataForm.startTime"
          placeholder="合同开始日期"
        ></el-input>
      </el-form-item>
      <el-form-item label="合同结束日期" prop="endTime">
        <el-input
          v-model="dataForm.endTime"
          placeholder="合同结束日期"
        ></el-input>
      </el-form-item> -->

      <el-form-item label="合同开始日期" prop="startTime">
        <el-date-picker
          v-model="dataForm.startTime"
          type="date"
          placeholder="选择合同开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="合同结束日期" prop="endTime">
        <el-date-picker
          v-model="dataForm.endTime"
          type="date"
          placeholder="选择合同结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="合同签订日期" prop="signingDate">
        <el-date-picker
          v-model="dataForm.signingDate"
          type="date"
          placeholder="选择合同签订日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="合同金额" prop="contractPrice">
        <el-input
          v-model="dataForm.contractPrice"
          placeholder="合同金额"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="录入时间" prop="inputTime">
        <el-input
          v-model="dataForm.inputTime"
          placeholder="录入时间"
        ></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="录入人" prop="inputPerson">
        <el-input
          v-model="dataForm.inputPerson"
          placeholder="录入人"
        ></el-input>
      </el-form-item>
      <el-form-item label="合同状态" prop="contractType">
        <el-input
          v-model="dataForm.contractType"
          placeholder="合同状态"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="甲方" prop="firstPartyId">
        <!-- <el-input
          v-model="dataForm.firstPartyId"
          placeholder="甲方用人单位表的 id"
        ></el-input> -->
        <el-select v-model="dataForm.firstPartyId" placeholder="请选择甲方">
          <el-option
            v-for="item in firstPartyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="乙方" prop="secondPartyId">
        <!-- <el-input
          v-model="dataForm.secondPartyId"
          placeholder="乙方员工表 id"
        ></el-input> -->
        <el-select v-model="dataForm.secondPartyId" placeholder="请选择乙方">
          <el-option
            v-for="item in secondPartyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      firstPartyOptions: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      secondPartyOptions: [
        // {
        //   value: "选项1",
        //   label: "黄金糕"
        // },
        // {
        //   value: "选项2",
        //   label: "双皮奶"
        // }
      ],
      visible: false,
      dataForm: {
        id: 0,
        contractNumber: "",
        contractName: "",
        startTime: "",
        endTime: "",
        signingDate: "",
        contractPrice: "",
        inputTime: "",
        inputPerson: "",
        contractType: "",
        firstPartyId: "",
        secondPartyId: ""
      },
      dataRule: {
        contractNumber: [
          { required: true, message: "合同编号不能为空", trigger: "blur" }
        ],
        contractName: [
          { required: true, message: "合同名称不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "请选择合同开始日期", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "请选择合同结束日期", trigger: "blur" }
        ],
        signingDate: [
          { required: true, message: "请选择合同签订日期", trigger: "blur" }
        ]
        // contractPrice: [
        //   { required: true, message: "合同金额不能为空", trigger: "blur" }
        // ],
        // inputTime: [
        //   { required: true, message: "录入时间不能为空", trigger: "blur" }
        // ],
        // inputPerson: [
        //   {
        //     required: true,
        //     message: "录入人不能为空",
        //     trigger: "blur"
        //   }
        // ],
        // contractType: [
        //   {
        //     required: true,
        //     message: "合同状态不能为空",
        //     trigger: "blur"
        //   }
        // ],
        // firstPartyId: [
        //   {
        //     required: true,
        //     message: "甲方用人单位表的 id不能为空",
        //     trigger: "blur"
        //   }
        // ],
        // secondPartyId: [
        //   { required: true, message: "乙方员工表 id不能为空", trigger: "blur" }
        // ]
      }
    };
  },
  methods: {
    getDateStr(timeObj) {
      let time = timeObj.getTime();
      var date = new Date(time);

      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate();

      var newTime = year + "-" + month + "-" + day;
      return newTime;
    },

    init(id) {
      // 获取 select 乙方 options 数据
      this.$http({
        url: this.$http.adornUrl(`/contract/employee/list`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.dataForm.contractNumber = data.schoolContract.contractNumber;
          console.log(data.page.list);
          this.secondPartyOptions = [];
          let optionsV = {};
          data.page.list.forEach(element => {
            optionsV = {};
            optionsV["label"] = element.employeeName;
            optionsV["value"] = element.id;
            this.secondPartyOptions.push(optionsV);
          });
        }
      });

      // 获取 select 甲方 options 数据
      this.$http({
        url: this.$http.adornUrl(`/contract/firstparty/list`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.page.list);
          this.firstPartyOptions = [];
          let optionsV = {};
          data.page.list.forEach(element => {
            optionsV = {};
            optionsV["label"] = element.firstPartyName;
            optionsV["value"] = element.id;
            this.firstPartyOptions.push(optionsV);
          });
        }
      });

      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/contract/schoolcontract/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.contractNumber = data.schoolContract.contractNumber;
              this.dataForm.contractName = data.schoolContract.contractName;
              this.dataForm.startTime = data.schoolContract.startTime;
              this.dataForm.endTime = data.schoolContract.endTime;
              this.dataForm.signingDate = data.schoolContract.signingDate;
              this.dataForm.contractPrice = data.schoolContract.contractPrice;
              this.dataForm.inputTime = data.schoolContract.inputTime;
              this.dataForm.inputPerson = data.schoolContract.inputPerson;
              this.dataForm.contractType = data.schoolContract.contractType;
              this.dataForm.firstPartyId = data.schoolContract.firstPartyId;
              this.dataForm.secondPartyId = data.schoolContract.secondPartyId;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      // 时间字段处理
      this.dataForm.startTime = this.getDateStr(this.dataForm.startTime);
      this.dataForm.endTime = this.getDateStr(this.dataForm.endTime);
      this.dataForm.signingDate = this.getDateStr(this.dataForm.signingDate);

      console.log(this.dataForm);

      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/contract/schoolcontract/${
                !this.dataForm.id ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              contractNumber: this.dataForm.contractNumber,
              contractName: this.dataForm.contractName,
              startTime: this.dataForm.startTime,
              endTime: this.dataForm.endTime,
              signingDate: this.dataForm.signingDate,
              contractPrice: this.dataForm.contractPrice,
              inputTime: this.dataForm.inputTime,
              inputPerson: this.dataForm.inputPerson,
              contractType: this.dataForm.contractType,
              firstPartyId: this.dataForm.firstPartyId,
              secondPartyId: this.dataForm.secondPartyId
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
